<script lang="ts" setup>
import { SearchCard } from '@/components/basic/Card'
import { List, ListItem } from '@/components/business/make/video'
import {
  AddCopy,
  AuditAudio,
  DownloadAudio,
  DownloadVideo,
  FinalVideo,
  PlayAudio,
  ProductionInstructions,
  ReleaseVideo,
  UploadVideo,
  ViewCopy
} from '@/components/basic/Operation'
import { Group } from '@/components/basic/Loading'
import { Pagination } from '@/components/basic/Pagination'
import { reactive, toRefs } from 'vue'
import Api from '@/api/'
import to from '@/utils/awaitTo'
import { debounce } from 'lodash-es'


// 响应式数据
const state = reactive({
  queryRef: null,
  queryParams: {
    videoIds: '',
    query: '',
    transcribeName: undefined,
    producerName: undefined,
    operateStatus: undefined,
    copywritingStatus: undefined,
    pageNum: 1,
    pageSize: 10,
    createTime: '',
    endTime: ''
  },
  list: [],
  total: 0,
  activeKey: [],
  loading: false
})

// 响应式数据解析
const { queryRef, queryParams, list, total, activeKey, loading } = toRefs(state)

// 搜索事件
const handleQuery = () => {
  getList()
}

// 重置方法
const handleReset = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  getList()
}

// 列表方法
const getList = async () => {
  loading.value = true
  const [error, data] = await to(Api.video.videoList(queryParams.value))
  loading.value = false
  console.log(data)
  if (!error) {
    // console.log(data);
    list.value = data.rows
    total.value = Number(data.total)
  }
}


/** 录制医生列表 */
const dockerData = reactive({
  list: [],
  queryParams: {
    searchName: ''
  },
  fetching: false
})
const getRecordingDoctor = async () => {
  dockerData.fetching = true
  const [error, data] = await to(Api.video.videoDoctorList(dockerData.queryParams))
  dockerData.fetching = false
  if (!error) {
    dockerData.list = data
    console.log(data)
  }
}
const fetchUser = debounce(async (value) => {
  dockerData.list = []
  dockerData.fetching = true
  dockerData.queryParams.searchName = value
  const [error, data] = await to(Api.video.videoDoctorList(dockerData.queryParams))
  dockerData.fetching = false
  if (!error) {
    dockerData.list = data
    // console.log(data);
  }
}, 300)


/** 制作列表 */
const producerData = {
  list: []
}
const getProducerList = async () => {
  const [error, data] = await to(Api.video.videoUserResultList({ roleIdentifying: 5 }))
  if (!error) {
    // console.log(data);
    producerData.list = data
  }
}


getList()
getRecordingDoctor()
getProducerList()


/** 操作状态 */
const OperateTypeDict = [
  {
    value: '5000',
    label: 'app申请帮我剪辑'
  },
  {
    value: '5001',
    label: '音频待录制'
  },
  {
    value: '5002',
    label: '音频待审核'
  },
  {
    value: '5003',
    label: '音频审核失败'
  },
  {
    value: '5004',
    label: '待制作'
  },
  {
    value: '5005',
    label: '制作中'
  },
  {
    value: '5006',
    label: '视频待初审'
  },
  {
    value: '5007',
    label: '视频待终审'
  },
  {
    value: '5008',
    label: '视频待终审'
  },
  {
    value: '5009',
    label: '视频终审成功'
  },
  {
    value: '5010',
    label: '视频终审失败'
  },
  {
    value: '5011',
    label: '视频发布失败'
  }
]

/** 文案状态 */
const CopywritingStatusDict = [
  {
    label: '待添加',
    value: '6001',
    color: '#87d068'
  },
  {
    label: '已添加',
    value: '6002',
    color: '#2db7f5'
  }
]

</script>

<template>
  <div>
    <!-- 搜索 -->
    <SearchCard>
      <a-form ref="queryRef" :model="queryParams" layout="inline">
        <a-form-item class="mt-3" label="id" name="videoIds">
          <a-input v-model:value="queryParams.videoIds" placeholder="请输入id" />
        </a-form-item>

        <a-form-item class="mt-3" label="关键词" name="query">
          <a-input v-model:value="queryParams.query" placeholder="请输入关键词" />
        </a-form-item>

        <a-form-item class="mt-3" label="录制医生" name="transcribeName">
          <a-select
            v-model:value="queryParams.transcribeName"
            :filter-option="false"
            :not-found-content="dockerData.fetching ? undefined : null"
            placeholder="请输入录制医生"
            show-search
            @change="handleQuery"
            @search="fetchUser"
          >
            <a-select-option
              v-for="(item,index) in dockerData.list"
              :key="index"
              :label="item.doctorName"
              :value="item.doctorName"
            >
              <img :src="item.uniqueImg" class="w-5 h-5 rounded" />
              <span class="ml-2">{{ item.doctorName }}</span>
            </a-select-option>
            <template v-if="dockerData.fetching" #notFoundContent>
              <a-spin size="small" />
            </template>
          </a-select>
        </a-form-item>

        <a-form-item class="mt-3" label="制作人" name="producerName">
          <a-select
            v-model:value="queryParams.producerName"
            :fieldNames="{ label: 'nickName', value: 'userId' }"
            :options="producerData.list"
            placeholder="请选择制作人"
            show-search
            @change="handleQuery"
          />
        </a-form-item>

        <a-form-item class="mt-3" label="操作状态" name="operateStatus">
          <a-select
            v-model:value="queryParams.operateStatus"
            :fieldNames="{ label: 'label', value: 'value' }"
            :options="OperateTypeDict"
            placeholder="请选择文案状态"
            show-search
            @change="handleQuery"
          ></a-select>
        </a-form-item>

        <a-form-item class="mt-3" label="文案状态" name="copywritingStatus">
          <a-select
            v-model:value="queryParams.copywritingStatus"
            :fieldNames="{ label: 'label', value: 'value' }"
            :options="CopywritingStatusDict"
            placeholder="请选择文案状态"
            show-search
            @change="handleQuery"
          ></a-select>
        </a-form-item>

        <a-form-item class="mt-3">
          <a-button type="primary" @click="handleQuery">搜索</a-button>
          <a-button class="ml-3" @click="handleReset(queryRef)">重置</a-button>
        </a-form-item>
      </a-form>
    </SearchCard>

    <!-- 列表 -->
    <List>
      <Group :isEmpty="!list.length" :pending="loading">
        <ListItem v-for="(item,index) in list" :key="index" :item="item">
          <!-- 操作 -->
          <template #operation="{ row }">

            <!--  添加文案  -->
            <AddCopy :row="row" @callback="handleQuery" />

            <!-- 播放音频 -->
            <PlayAudio v-if="Number(row.operateStatus) === 5002" :row="row" />

            <!-- 下载音频 -->
            <DownloadAudio v-if="Number(row.operateStatus) === 5002" :row="row" @callback="handleQuery" />

            <!-- 审核音频 -->
            <AuditAudio v-if="Number(row.operateStatus) === 5002" :row="row" @callback="handleQuery" />

            <!-- 下载视频 -->
            <DownloadVideo
              v-if="Number(row.operateStatus) === 5004 || Number(row.operateStatus) === 5005 || Number(row.operateStatus) === 5008 || Number(row.operateStatus) === 5009 || Number(row.operateStatus) === 5010 || Number(row.operateStatus) === 5011"
              :row="row" @callback="handleQuery" />

            <!--  制作说明  -->
            <ProductionInstructions
              v-if="Number(row.operateStatus) === 5005 || Number(row.operateStatus) === 5010 || Number(row.operateStatus) === 5008 || Number(row.operateStatus) === 5004"
              :row="row" />

            <!-- 上传视频 -->
            <UploadVideo v-if="Number(row.operateStatus) === 5005 || Number(row.operateStatus) === 5010" :row="row"
                         @callback="handleQuery" />

            <!-- 终审视频 -->
            <!-- <FinalVideo v-if="Number(row.operateStatus) === 5008" :row="row" @callback="handleQuery" />-->

            <!--  发布视频  -->
            <ReleaseVideo v-if="Number(row.operateStatus) === 5009" :row="row" />

            <!-- 查看文案  -->
            <ViewCopy v-if="Number(row.operateStatus) === 5009" :row="row" />
          </template>
        </ListItem>
      </Group>
    </List>

    <!-- 分页 -->
    <div class="flex justify-end my-4">
      <Pagination v-model:page-num="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                  :total="total" @pagination="getList" />
    </div>

  </div>
</template>

<style lang="less" scoped>

</style>
